<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>fix table title</title>
<script src="../jQuery/jquery.js" type="text/javascript"></script>
<style>th{background:#ccc;}</style>
</head>

<body>
<div id="box1">
<table id='tab' border="1" cellpadding="3" cellspacing="0" style="position:relative;">
	<tr><th>name</th><th>age</th><th>math</th><th>chinese</th><th>art</th><th>english</th></tr>
</table>
</div>

<div id="title"></div>

<script>
$(function(){
	$('#title').html($('#box1').html())
	$('#title').css({position:'absolute',left:$('#box1').offset().left,top:$('#box1').offset().top})
	var str=''
	for(var i=0;i<100;i++){
		str += ("<tr><td>jim</td><td>18</td><td>80</td><td>90</td><td>80</td><td>90</td></tr>")
	}
	$('#tab').append(str)
	//$('#box1').wrap('<div style="height:500px;overflow:scroll;"/>')
	$(window).scroll(function(){
		var s_left,s_top
		if(document.compatMode=='BackCompat'){
			s_left = document.body.scrollLeft
			s_top = document.body.scrollTop
		}else{
			s_left = document.documentElement.scrollLeft
			s_top = document.documentElement.scrollTop
		}
		$('#title').css({left:($('#box1').offset().left+s_left),top:($('#box1').offset().top+s_top)})
	});
});
</script>
</body>
</html>
